<template>
    <div class="bank-apply-main">
        <van-nav-bar left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">提现申请</span>
            </template>
            <template #right>
				<span>提现明细</span>
			</template>
        </van-nav-bar>

        <div class="bankcard">
            <van-row style="display: flex;align-items: flex-end;">
                <van-col span="8" class="font-class">提现到</van-col>
                <van-col span="8" class="cardnum">{{User.bank?User.bank.bank_card.substring(User.bank.bank_card.length-4):"暂无银行卡"}}</van-col>
                <van-col span="8" style="margin-bottom: 3px;">
                    <van-button size="mini" v-if="User.bank"
                        style="float:right;border-radius: 5px; font-size:12px;width:60px;height:20px;" 
                        color="#666" plain type="primary"
                        @click="tobank">更换</van-button>
                    <van-button size="mini" v-if="!User.bank"
                        style="float:right;border-radius: 5px; font-size:12px;width:60px;height:20px;" 
                        color="#666" plain type="primary"
                        @click="toaddbank">添加</van-button>
                </van-col>
            </van-row>
            <van-divider :style="{ color: '#efefef' }"/>
            <div class="money-form">
                <p>提现金额:</p>
                <van-field type="number" v-model="money" placeholder="0.00" />
                <van-cell :label="`提现手续费率${User.withdraw_info?User.withdraw_info:'0'}%`" style="border:none;">
                    <template #title>
                        <span class="vancellx">账户余额：￥ <span style="font-family: 'DINPro-Bold';font-size:15px;">{{User.user_money}}</span></span>
                    </template>
                    <template #default>
                        <span style="color:#f6a7a7;font-size:12px;font-weight: bold;" @click="allget">全部提现</span>
                    </template>
                </van-cell>
            </div>
        </div>


        <img :src="canUse?btnactive:btn" @click="submit" class="apply-btn" alt="">
    </div>
</template>
<script>
import {_goWithdraw,_ajaxwithdraw} from '../../service/proxy'
export default {
    data(){
        return{
            backicon:require('../../assets/img/backicon.png'),
            money:"",
            canUse:false,
            btn:require('../../assets/img/bank-apply.png'),
            btnactive:require('../../assets/img/bank-apply-active.png'),

            User:{}
        }
    },
    mounted(){
        let _this=this
        let uid=JSON.parse(localStorage.getItem("user")).user_id
        _goWithdraw({
            user_id:uid
        }).then(res=>{
            _this.User=res.data
            if(res.errcode==1){
                let bank=res.data.list.filter(item=>{return item.is_check==1})
                if(bank.length==0){
                    this.User.bank=res.data.list[0]
                }else{
                    this.User.bank=bank[0]
                }
                console.log(_this.User)
            }else if(res.message=="用户没有绑定银行卡"){
                
            }
        })
    },
    watch:{
        money(val){
            // if(Number(val)>Number(this.User.user_money)){
            //     this.money=""
            //     this.money=(Number(this.User.user_money)-(Number(this.User.user_money)*0.006)).toFixed(2)
            // }else{

            // }
            if(val>0){
                this.canUse=true
            }else{
                this.canUse=false
            }
        }
    },
    methods:{
        onClickRight(){
            this.$router.push("/applyList")
        },
        tobank(){
            this.$router.push("/banklist")
        },
        onClickLeft(){
            this.$router.push("/procenter")
        },
        allget(){
            //全部提现
            this.money=this.User.user_money

        },
        toaddbank(){
            this.$router.push("/addbank")
        },
        submit(){
            let _this=this
            // if(Number(_this.money)>Number(this.User.user_money)){
            //     _this.$toast("金额不符合")
            //     return
            // }
            if(!this.canUse){
                
                return
            }
            if(!this.User.bank){
                this.$router.push("/addbank")
            }
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _ajaxwithdraw({
                user_id:uid,
                money:this.money,
                bank_id:this.User.bank.id
            }).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    _this.$toast("提现申请成功")
                    _this.$router.push("/procenter")
                }else{
                    _this.$toast(res.message)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}
.bank-apply-main{
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: #fff;
    .hometitle{
        font-size: 18px;
        .font-SC();
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }

    .bankcard{
        width: 100%;
        padding: 15px;

        .font-class{
            .font-SC();
            font-weight: 1000;
            font-size: 12px;
            color: #333;
            // line-height: 20px;
            // margin-top: 5px;
            // vertical-align: ;
        }
        .cardnum{
            font-family: 'DINPro-Bold';
            font-size: 15px;
            color: #666;
            text-align: center;
            // margin-top: 2px;
        }
        .money-form{
            width: 100%;
            margin-top: 50px;
            p{
               .font-SC();
               font-weight: 1000;
                font-size: 12px;
                color: #333;
            }
            /deep/.van-cell{
                padding-left: 0;
                border-bottom: 1px solid #efefef;
            }
            /deep/.van-field__body{

                &::before{
                    content: "￥";
                    margin-top: 10px;
                    margin-right: 5px;
                }
            }
            /deep/.van-field__control{
                font-family: 'DINPro-Bold';
                font-size: 30px;
                &:placeholder-shown{
                    font-family: 'DINPro-Bold';
                    font-size: 30px
                }
            }
            .vancellx{
                .font-SC();
                font-weight: 1000;
                font-size: 12px;
            }
            .vancellxx{
                .font-SC();
                font-weight: bold;
                font-size: 12px;
            }
        }
    }


    .apply-btn{
        width: 367px;
        margin-top: 249px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        @media only screen and (min-device-height: 600px) and (max-device-height: 690px){
            margin-top: 185px;
        }
    }
}
</style>